<script setup lang="ts">
import Taro from "@tarojs/taro";
import { computed } from "vue";

import Page from "@/components/common/Page.vue";
import ByBadge from "@/components/ui/ByBadge.vue";
import ByIcon from "@/components/ui/ByIcon.vue";

import useFetch from "@/hooks/useFetch";
import ApiApp from "@/api/app";

const { data } = useFetch<{
  list: [{ content: string; title: string; mobile: string; qr_code: string }];
}>(ApiApp.getContent, { defaultParams: { category: 1, type: 5 } });

const info = computed(() => data.value?.list[0]);

// 拨打电话
const handleCall = () =>
  Taro.makePhoneCall({
    phoneNumber: info.value!.mobile,
  });
</script>

<template>
  <Page>
    <view class="px-3">
      <view class="flex items-center justify-between">
        <view class="text-[58px] font-bold -skew-x-12">联系客服</view>
        <image
          class="w-[176px]"
          mode="widthFix"
          src="../../static//images/service.png"
        />
      </view>

      <view class="bg-white rounded-lg px-3" v-if="info?.mobile">
        <view class="flex items-center py-3 border-b-1 border-black/20">
          <text class="mr-1 h-[12px] w-[12px] rounded-full bg-black/50" />
          <view class="flex-auto text-third">电话</view>
          <view class="flex-center">
            <text class="mr-1">{{ info.mobile }}</text>
            <ByBadge bg-color="#222" :size="40" @tap="handleCall">
              <ByIcon
                name="PhoneFill"
                color="var(--color-primary)"
                :size="20"
              />
            </ByBadge>
          </view>
        </view>

        <template v-if="info?.qr_code">
          <view class="flex items-center py-3">
            <text class="mr-1 h-[12px] w-[12px] rounded-full bg-black/50" />
            <view class="flex-auto text-third">客服微信</view>
          </view>

          <view>请添加微信: CDJNH2020</view>

          <view class="text-center mt-7">
            <image
              :src="info.qr_code"
             :show-menu-by-longpress="true"
              class="w-[254px] h-[254px] rounded-lg bg-[#E6E6E6]"
            />
            <view class="text-sm mt-1.5 pb-7">微信二维码</view>
          </view>
        </template>
      </view>
    </view>
  </Page>
</template>
